/*
Theme Name: eroburu Theme
Author: eroburu
Description: This is my original theme.
Version: 1.0
*/

/* =======================================
 *   all style
 * ========================================*/
body {
    font-family:  "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    margin: 0;
}

#main {
    margin-top : 20px;
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    max-width : 100%;
//    position: relative;
//    top: 50px;
}

.wp-pagenavi a , .wp-pagenavi span.extend ,
.wp-pagenavi span.current {
   margin : 3px !important; 
   padding : 7px 10px 7px 10px !important;
   border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

#entry-area {
    display : inline-block;
    float : right;
    width : 640px;
    max-width : 100%;
    //background-color : #F2F5A9;
}

#side-area {
    display : inline-block;
    width : 300px;
    max-width : 100%;
    margin : 0 10px;
    //background-color : #CEECF5;
}

.site-footer {
    background-color: #000000;
    width: 100%;
    height: 40px;
    margin-top: 100px;
}

.both-clear {
    clear : both;
}

.site-navi {
    background-color : #04B45F;
    float : left;
    font-size : 20px;
    margin : 5px;
    padding : 5px 8px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.site-navi a {
    color : #FFFFFF;
}

#site-navi-area {
   position : fixed;
   bottom : 10px;
   right : 10px;
   width: 135px;
}

#site-navi-area a{
    color : #FFFFFF;
}

/* =======================================
 *   site header
 * ========================================*/
.site-header {
    background-color: #FFFFFF;
//    position: fixed;
//    top: 0;
    padding: 8px 0 0 0;
    width: 100%;
    height: 45px;
    z-index: 10;
    box-shadow : 0px 1px 2px 0px #6E6E6E;
    border-top: 2px solid #6E6E6E;
    border-bottom: 2px solid #6E6E6E;
}

.site-header ul {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-left: 0;
}

.site-header li {
    float: left;
    height: 40px;
    list-style-type: none;
    font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 2;
    padding: 0px 20px 0px 16px;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    border-right : 2px solid #BDBDBD;
}

li.top-title {
    border-left : 2px solid #BDBDBD;
}

.site-header li:hover {
    border-bottom : 5px solid #04B431;
}

.site-header a {
    text-decoration : none;
    color : #000000;
}

.site-header i {
    font-size : 22px;
    color : #04B45F;
}

.header-info {
//    position: relative;
//    top: 58px;
    background-color : #04B45F;
    color: #FFFFFF;
}

.header-info a {
    color: #FFFFFF;
}

.header-info a:hover {
    color: #F7BE81;
}

.breadcrumb-list {
    font-size : 14px;
    width : 980px;
    max-width : 95%;
    margin : auto;
    padding-left: 30px;
    padding-top: 5px;
    padding-bottom: 5px;}

.breadcrumb-list a{
    font-size : 14px;
    text-decoration : none;
}



/* =======================================
 *    HOME 
 *========================================*/
.entry-element {
    display : inline-block;
    float : left;
    width : 300px;
    padding : 10px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;

}

.entry-element:hover {
    background-color : #61B776;
}

.entry-element:hover > div.entry-title-list a {
    color : #FFFFFF;
}

.entry-element:hover > div.entry-title-list i{
    color : #FFFFFF;
}

.entry-element:hover > div.entry-title-list h4{
    color : #FFFFFF;
}

.entry-element:hover > div.entry-title-list a:hover {
    color : #F7BE81;
}

.entry-element:hover > div.entry-category-list a {
    color : #FFFFFF;
}

.entry-element:hover > div.entry-category-list i {
    color : #FFFFFF;
}

.entry-element:hover > div.entry-category-list {
    color : #FFFFFF;
}

.entry-element:hover > div.entry-category-list a:hover{
    color : #F7BE81;
}


.entry-element a {
    text-decoration : none;
    color : #6E6E6E;
}

.entry-element i {
    color : #04B45F;
    font-size : 18px;
}

.entry-element h4 {
    color : #6E6E6E;
}

.entry-thumbnail-list img{
    margin : auto;
    width : 300px;
    height : 300px;
    box-shadow : 0px 1px 1px 0px #6E6E6E;
}

.entry-title-list {
    height : 55px;
    overflow : hidden;
    border-bottom: 1px dotted #6E6E6E;
    border-top: 1px dotted #6E6E6E;
}

.entry-title-list h4{
    margin : 5px 0;
    font-size : 14px;
}

.entry-category-list {
    font-size : 14px;
    font-weight : bold;
    padding : 8px 0;
    color : #6E6E6E;
    border-bottom : 1px dotted #6E6E6E;
}

h1.cat-title {
    font-size : 22px;
}

/* =======================================
 *    pagenavi style
 *========================================*/
.wp-pagenavi {
    clear : both;
    margin-bottom: 40px;
    position: relative;
    top: 20px;
}

.wp-pagenavi a, .wp-pagenavi span {
    text-decoration: none;
    border: 1px solid #04B45F;
    padding: 3px 5px;
    margin: 2px;
    background-color: #04B45F;
    color: #FFFFFF;
}

.wp-pagenavi a, .wp-pagenavi span.extend, .wp-pagenavi span.current {
    margin: 3px !important;
    padding: 7px 10px 7px 10px !important;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color : #93E993;
    background-color : #93E993;
}

/* =======================================
 *    single
 *========================================*/
.entry-content img{
    max-width : 100%;
}

h3.related-posts-list,
h3.dmm-adv-title, 
h3.related_post_title {
    border-left : 8px solid #04B45F;
    padding-left : 10px;
}

.entry-thumbnail img{
    max-width : 100%;
}

h1.entry-title-single {
    font-size : 22px;
    padding : 5px;
    margin : 0 0 10px 0;
    border-top : none;
    border-bottom : none;
}

.entry-info {
    font-size : 14px;
    color : #6E6E6E;
    padding: 5px 10px;
    background-color: #ECFFF1;
    border: 1px dotted #04B45F;
}

.entry-info a {
    font-size : 14px;
    color : #6E6E6E;
    text-decoration : none;
}

.entry-info a:hover {
    color : #F7BE81;
}

.entry-info i {
    color : #04B45F;
    margin-left : 5px;
}

.hitokoto {
    font-size : 14px;
    color : #848484;
    margin : 5px;
    padding : 5px;
    background-color : #F7F8E0;
    border : 1px dotted ;
}

.img-number {
    position : relative;
    display: block;
    top: 35px;
    padding: 3px 5px;
    background-color: #FA58D0;
    width: 30px;
    color: #FFFFFF;
    text-align: center;
}

img.entry-img {
    width : 640px;
    margin : 5px 0;
}

img.entry-img:hover {
    opacity : 0.8;
}

.dmm-item-area {
    margin-top : 50px;
}
.dmm-item {
    margin : -40px 0 10px 0;
    display: inline-block;
}

.dmm-item-name {
    position : relative;
    bottom: 57px;
    padding : 0 5px;
    background-color: #7401DF;
    color: #FFFFFF;
    opacity: 0.7;
    height: 50px;
    overflow : hidden;
}

.dmm-item-name a{
    color : #FFFFFF;
    text-decoration : none;
}

.dmm-item-name a:hover {
    color : #F7BE81;
}

.dmm-item-thumbnail img {
    max-width : 100%;
}

.dmm-item-thumbnail img:hover {
    opacity : 0.8;
}

.inner-adv {
    margin : 0 auto 30px auto;
}

.navi-link-single {
    margin-top : 40px;
}

.navi-link-single-previous a,
.navi-link-single-next a {
    text-decoration : none;
    color : #FFFFFF;
}

.navi-link-single-previous, 
.navi-link-single-next {
    display : inline-block;
    background-color : #04B45F;
    width : 290px;
    max-width : 90%;
    padding : 5px 8px;
    border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
    margin: 5px;
}

.navi-link-single-next:hover,
.navi-link-single-previous:hover {
    background-color : #93E993;
}

.entry-content a {
    text-decoration : none; 
}

.img-search-form a {
    font-size : 14px;
    text-decoration : none; 
}

/* ----------------------------------------------- 
      BlogRoll css 2
 ----------------------------------------------- */

.blogroll-channel,
.blogroll-channel * {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    text-align: left;
}
.blogroll-channel {
    margin-bottom: 15px;
    padding: 0;
}

ul.blogroll-list-wrap {
    padding-left : 18px;
}

.blogroll-channel .blogroll-list-wrap {
    margin-bottom: 10px;
}

.blogroll-channel .blogroll-list {
    list-style-type: none;
    margin-bottom: 3px;
    font-size: 14px;
    line-height: 1.5;
}

.blogroll-channel .blogroll-list img {
    vertical-align: middle;
}

.blogroll-channel img.blogroll-icon,
.blogroll-channel img.blogroll-favicon {
    margin: 0 8px 0 0;
}

.blogroll-channel img.blogroll-favicon {
	width: 16px;
	height: 16px;
}

.blogroll-channel a.blogroll-link {
}

.blogroll-channel .blogroll-new-entry {
    margin-left: 5px;
    color: red;
}

.blogroll-channel .blogroll-clip,
.blogroll-channel .blogroll-hatebu {
    margin: 0 0 0 5px;
}

.blogroll-channel .blogroll-link-time {
    margin: 0 0 0 3px;
    color: #666;
    font-size: 10px;
}

.blogroll-channel .blogroll-ad-img {
}

.blogroll-channel .blogroll-ad-text {
    display: none;
    margin-top: 5px;
    font-size : 8px;
    color: #666;
}

.blogroll-ad-default a {
    font-size : 8px;
}

.blogroll-list a {
    text-decoration : none;
}

.blogroll-list a:hover {
    color : #81BEF7;
}

/* =======================================
 *    footer
 *========================================*/
.site-footer {
}

.site-info {
    width : 980px;
    margin : auto;
    color : #FFFFFF;
    font-size : 12px;
    padding: 10px 0;
    text-align : center;
}

/* =======================================
 *    widget
 *========================================*/
.widget-area ul {
    list-style-type: none;
    padding : 0 0 0 10px;
    margin-top : 0;
}

.widget-title{
    font-size : 18px;
    font-weight : bold;
    border-left : 8px solid #04B45F;
    border-bottom : 2px solid #04B45F;
    padding : 0 10px;
    margin : 10px 0;
}

.widget-area li {
    font-size : 14px;
}

.widget-area a {
    font-size : 14px;
    color : #6E6E6E;
    text-decoration : none;
}

.widget-area a:hover {
    color : #F7BE81;
}

li.widget {
    margin-bottom: 20px;
}

.widget_search {
    padding : 10px 15px;
    margin-top : 10px;
    background-color : #04B45F;
    color : #FFFFFF;
    border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;    
}

/* =======================================
 *    advertise
 * ========================================*/
#side-adv {
    padding: 0;
    margin : 0 0 0 -10px;
}

.adv-top {
}

.pc-adv {
    display : inline-block;
    margin-bottom : 10px;
    margin-left : auto;
    margin-right : auto;
}

.sp-adv {
    margin-bottom : 10px;
}


/* =======================================
 *    media query
 *========================================*/
@media screen and (max-width: 320px) {
        #main {
            max-width: 100%;
            padding: 0;
        }

        .site-header a {
            font-size : 16px;
         }

        .site-header li {
            font-size : 16px;
            padding : 0 8px ;
        }

        #entry-area {
            width : 100%;
        }

        #side-area {
            margin: 0;
        }

        #site-footer, .site-info {
            max-width: 100%;
        }

        .breadcrumb-list {
            padding-left : 0;
        }
      
       .wp-pagenavi {
          margin-left : 10px;
          margin-right : auto;
          padding : 10px 5px 10px;
          width : 95%;
       }

      .wp-pagenavi a , .wp-pagenavi span.extend ,
      .wp-pagenavi span.current {
          margin : 2px !important; 
          padding : 7px 10px 7px 10px !important;
          border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
      }
}

@media screen and (min-width: 321px) {
        #main {
            max-width: 95%;
            padding : 0;
        }

        .site-header li a {
            font-size : 18px;
         }

        #entry-area {
            width : 100%;
        }

        .breadcrumb-list {
            padding-left : 0;
        }

       #side-area {
           margin: 0;
       }

        #site-footer, .site-info {
            max-width: 100%;
        }

      .wp-pagenavi {
         padding : 10px 5px 10px;
         width : 90%;
      }
}

@media screen and (min-width: 375px) {
        #main {
            max-width: 90%;
        }
        
        .site-header li a {
            font-size : 18px;
         }

        #side-area {
            margin: 0;
        }

        #site-footer, .site-info {
            max-width: 100%;
        }

       .wp-pagenavi {
          padding : 10px 5px 10px;
          width : 90%;
       }
}


@media screen and (min-width: 568px) {
        #main {
            max-width: 100%;
        }

        #entry-area {
            width : 100%;
        }

        #site-footer {
            max-width: 100%;
        }

}

@media screen and (max-width: 980px) {
        #entry-area {
            width : 100%;
            clear : both;
        }

        #side-area {
            width : 95%;
        }

        li#text-3 {
            display : none;
        }
}

@media screen and (min-width: 980px) {
        #entry-area {
            width : 640px;
        }

        #side-area {
            width : 300px;
        }

        li#text-3 {
            display : list-item;
        }
}